<template>
  <div class="home-swiper">
    <cube-slide
      :data="home.swiper"
      :speed="800"
      :interval="interval"
      class="swiper"
      @change="changeSwiper"
    >
      <cube-slide-item
        v-for="(item, index) in home.swiper"
        :key="index"
        @click.native="handleClick(item)"
        class="item"
      >
        <!--   这里不用缩略图了    -->
        <img :src="item.image.path" v-if="item.image && item.image.path" />
        <!--        <img :src="item.image.thumbnail_path" v-if="item.image && item.image.thumbnail_path" />-->
      </cube-slide-item>
    </cube-slide>
    <div class="swiper-mask" @click="handleClick"></div>
  </div>
</template>

<script>
// import Delay from '@/components/Delay'
export default {
  props: ['home'],
  components: {
    // Delay
  },
  data() {
    return {
      interval: 3000,
      index: 0
    }
  },
  methods: {
    handleClick() {
      const item = this.home.swiper[this.index]
      console.log(item)
      const url = item.wx_url
      if (url && url.length > 0) {
        this.$router.push(url)
      }
    },
    // 触发索引
    changeSwiper(index) {
      this.index = index
      // this.$emit('changeSwiper', index)
    }
  }
}
</script>

<style scoped lang="stylus">
$height = 200px

.home-swiper
  position relative
  height $height
  //height 200px
  //padding 0 10px 10px 10px
  //background #fbfbfb
  //border-radius 10px
  //margin 20px 10px 0 10px
  //margin 0 10px 10px 10px
  margin 10px
  .swiper-mask
    position absolute
    width 100%
    height $height
    background red
    z-index 999999
    top 0
    left 0
    opacity 0
  .swiper
    //border-radius 10px
    .item
      //display flex
      //align-items center
      img
        width 100%
        height 100%
        border-radius 10px

</style>
